<template>
  <div class="mapBox">
  <div v-show="mapEle==='2d'" id="container_2d" class="mapBox"></div>
  <div v-show="mapEle!=='2d'" id="container_3d" class="mapBox"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      map: '',
      map3D: ''
    }
  },
  props: {
    mapEle: {
      type: String
    }
  },
  watch: {
    mapEle(cur) {
      if(cur === '2d'){
        this.$emit('map', this.map)
      } else {
        this.$emit('map', this.map3D)
      }
    }
  },
  methods: {
    init () {
      console.log(this.mapEle, '地图重载')
      this.map = new AMap.Map('container_2d', {
        zoom: 20,
        resizeEnable: true,
        mapStyle: 'amap://styles/d3fc11529eaf1d820d9d1d79da8a104c', // 设置地图的显示样式
        viewMode: '2D' // 使用3D视图
      })
      this.map3D = new AMap.Map('container_3d', {
        zoom: 20,
        resizeEnable: true,
        mapStyle: 'amap://styles/d3fc11529eaf1d820d9d1d79da8a104c', // 设置地图的显示样式
        viewMode: '3D' // 使用3D视图
      })
      if(this.mapEle === '2d'){
        this.$emit('map', this.map)
      } else {
        this.$emit('map', this.map3D)
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style rel="stylesheet/less" lang="less">
  .mapBox {
    position: absolute;
    height: 100%;
    width: 100%;
  }
</style>
